var tempTime1;
var myEcharts1;
$(function(){
	myEcharts1 = echarts.init(document.getElementById('myEcharts1'));
})
function setEcharts1(list){
	clearInterval(tempTime1);
	var xData=[],yData=[];
	for(var i=0; i<list.length; i++){
		var obj = list[i];
		xData.push(obj.num+"时");
		yData.push(""+obj.count);
	}
	var option = {
		 legend: {
	        icon: 'circle',
	        top: '5%',
	        right: '5%',
	        itemWidth: 6,
	        itemGap: 20,
	        textStyle: {
	            color: '#b4d8e0'
	        }
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            label: {
	                backgroundColor: '#6a7985',
	                fontSize: 12
	            },
	        },
	    },
	    grid: {
	        top: '20%',
	        right: '5%',
	        left: '10%',
	        bottom: '10%'
	    },
	   xAxis: {
	        type: 'category', 
	        boundaryGap: false, // 两边留空
	        data: xData,
	        axisLine: {
	            lineStyle: {
	                color: 'rgba(255,255,255,0.12)'
	            }
	        },
	        axisLabel: {
	            margin: 10,
	            color: '#b4d8e0',
	            textStyle: {
	                fontSize: 14
	            },
	        },
	    },
	    yAxis:{
	    	name:'', 
	    	type: 'value', 
	    	scale: true, // 是否从最低值开始（否从0开始）
	        axisLabel: {
	            formatter: '{value}',
	            color: '#b4d8e0',
	        },
	        axisLine: {
	            show: false,
	            lineStyle: {
	                color: 'rgba(255,255,255,0.12)'
	            }
	        },
	        splitLine: {
	        	show: true,
	            lineStyle: {
	                color: 'rgba(255,255,255,0.12)'
	            }
	        }
	    },
	    series: [{
	        name: '实时流量', type: 'line', stack: '',
	        // 修改的是线下区域的颜色
	        areaStyle: { color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	            offset: 0,
	            color: 'rgba(236, 99, 123, .5)'
	        }, {
	            offset: 1,
	            color: 'rgba(102, 212, 250,.0)'
	        }])},
	        itemStyle: {
                color: '#0fb5da'
            },
	        // 修改的是线的颜色
	        lineStyle: { color: { 
	            type: 'linear',x: 0, y: 1, x2: 0, y2: 0,
	            // 0% 处的颜色  // 100% 处的颜色
	            colorStops: [{ offset: 0, color: '#3a76f6' },
	            	{ offset: .25, color: '#66d4fa' }, 
	            	{ offset: .75, color: '#f8d470'}, 
	            	{ offset: 1, color: '#ec637b'}],
	            global: false // 缺省为 false
	        },width:2},
	        //图例样式，默认空心圆，设为none是实心，还有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
	        symbol:'none',  
	        smooth: true,// 线类型：如圆线、直角线
	        data: yData,
		}]
	};
	myEcharts1.setOption(option);
	
	if(yData){
    	var len = yData.length;
   		var ehcartsIndex1 = 0; //播放所在下标,使得tootip每隔三秒自动显示
   		tempTime1 = setInterval(function() {
   	   		myEcharts1.dispatchAction({
	            type: 'downplay',
	            seriesIndex: 0,
	            dataIndex: ehcartsIndex1
	        });
   	   		myEcharts1.dispatchAction({
   	   			type: 'showTip',
   	            seriesIndex: 0,
   	            dataIndex: ehcartsIndex1
   	   		});
   	   		myEcharts1.dispatchAction({
   	            type: 'highlight',
   	            seriesIndex: 0,
   	            dataIndex: ehcartsIndex1
   	       });
   	   	   ehcartsIndex1 ++;
   	       if (ehcartsIndex1 >= len) {
   	    	ehcartsIndex1 = 0;
   	       }
   	   	}, 3000);
   	}
}




